<template>
    <uxt-page :title="title">
        <uxt-bar-group title="设置">
            <uxt-single-selector-bar
                title="样式"
                :options="styles"
                v-model="style"
            ></uxt-single-selector-bar>
            <uxt-single-selector-bar
                title="位置"
                :options="positions"
                v-model="position"
            ></uxt-single-selector-bar>
            <uxt-color-selector-bar
                title="颜色"
                v-model="color"
                :customize="false"
                clearable
            ></uxt-color-selector-bar>
            <uxt-bar title="阴影">
                <template slot="right">
                    <uxt-radio-group v-model="shadow" size="sm" type="btn">
                        <uxt-radio label="无" value=""></uxt-radio>
                        <uxt-radio classes="margin-lr-sm" label="shadow" value="shadow"></uxt-radio>
                        <uxt-radio label="shadow-wrap" value="shadow-wrap"></uxt-radio>
                    </uxt-radio-group>
                </template>
            </uxt-bar>
            <uxt-bar title="圆角">
                <template slot="right">
                    <uxt-radio-group v-model="radius" size="sm" type="btn">
                        <uxt-radio label="无" value=""></uxt-radio>
                        <uxt-radio classes="margin-lr-sm" label="小圆角" value="radius"></uxt-radio>
                        <uxt-radio label="大圆角" value="round"></uxt-radio>
                    </uxt-radio-group>
                </template>
            </uxt-bar>
        </uxt-bar-group>
        <uxt-bar-group title="展示">
            <view class="padding bg-white">
                <view
                    class="margin-sm padding-sm text-center"
                    :class="[
                        `${styles[style]}${positions[position].value}${color ? `-${color}` : ''}`,
                        shadow,
                        radius
                    ]"
                >
                    {{
                        `${styles[style]}${positions[position].value}${
                            color ? `-${color}` : ''
                        } ${shadow} ${radius}`
                    }}
                </view>
            </view>
        </uxt-bar-group>
    </uxt-page>
</template>

<script>
import uxtBarGroup from '@xtcoder/uxt/components/uxt-bar-group.vue'
import uxtBar from '@xtcoder/uxt/components/uxt-bar.vue'
import uxtSingleSelectorBar from '@xtcoder/uxt/components/uxt-single-selector-bar.vue'
import uxtColorSelectorBar from '@xtcoder/uxt/components/uxt-color-selector-bar.vue'
import uxtRadio from '@xtcoder/uxt/components/uxt-radio.vue'
import uxtRadioGroup from '@xtcoder/uxt/components/uxt-radio-group.vue'

export default {
    components: {
        uxtBarGroup,
        uxtBar,
        uxtSingleSelectorBar,
        uxtColorSelectorBar,
        uxtRadio,
        uxtRadioGroup
    },
    data() {
        return {
            theme: this.gTheme,
            title: '边框',
            styles: ['solid', 'solids', 'dashed', 'dasheds'],
            style: 0,
            positions: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '上',
                    value: '-top'
                },
                {
                    label: '右',
                    value: '-right'
                },
                {
                    label: '下',
                    value: '-bottom'
                },
                {
                    label: '左',
                    value: '-left'
                }
            ],
            position: 0,
            color: '',
            shadow: '',
            radius: ''
        }
    }
}
</script>

<style lang="scss" scoped></style>
